<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3 3D多重变形制作3D立方体</title>
	<style type="text/css">
		@-webkit-keyframes spin{
			0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-moz-keyframes spin{
			0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-ms-keyframes spin{
			0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-o-keyframes spin{
			0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@keyframes spin{
			0%{transform:rotateY(0deg)}
			100%{transform:rotateY(360deg)}
		}
		.stage {
			width: 300px;
			height: 300px;
			margin: 15px auto;
			position: relative;
			background: url(images/bg-grid.jpg) no-repeat center center;
			background-size: 100% 100%;
			
			-webkit-perspective: 300px;
			-moz-perspective: 300px;
			-ms-perspective: 300px;
			-o-perspective: 300px;
			perspective: 300px;
		}
		.container {
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -100px;
			position: absolute;
			-webkit-transform: translateZ(-100px);
			-moz-transform: translateZ(-100px);
			-ms-transform: translateZ(-100px);
			-o-transform: translateZ(-100px);
			transform: translateZ(-100px);
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.container:hover{
			-moz-animation:spin 5s linear infinite;
			-o-animation:spin 5s linear infinite;
			-webkit-animation:spin 5s linear infinite;
			animation:spin 5s linear infinite;
		}
		.side {
			background: rgba(142,198,63,0.3);
			border: 2px solid #8ec63f;
			font-size: 60px;
			font-weight: bold;
			color: #fff;
			height: 196px;
			line-height: 196px;
			position: absolute;
			text-align: center;
			text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
			text-transform: uppercase;
			width: 196px;
		}
		
		.front {
			-webkit-transform: translateZ(100px);
			-moz-transform: translateZ(100px);
			-ms-transform: translateZ(100px);
			-o-transform: translateZ(100px);
			transform: translateZ(100px);
		}
		.back {
			-webkit-transform: rotateX(180deg) translateZ(100px);
			-moz-transform: rotateX(180deg) translateZ(100px);
			-ms-transform: rotateX(180deg) translateZ(100px);
			-o-transform: rotateX(180deg) translateZ(100px);
			transform: rotateX(180deg) translateZ(100px);
		}
		.left {
			-webkit-transform: rotateY(-90deg) translateZ(100px);
			-moz-transform: rotateY(-90deg) translateZ(100px);
			-ms-transform: rotateY(-90deg) translateZ(100px);
			-o-transform: rotateY(-90deg) translateZ(100px);
			transform: rotateY(-90deg) translateZ(100px);
		}
		.right {
			-webkit-transform: rotateY(90deg) translateZ(100px);
			-moz-transform: rotateY(90deg) translateZ(100px);
			-ms-transform: rotateY(90deg) translateZ(100px);
			-o-transform: rotateY(90deg) translateZ(100px);
			transform: rotateY(90deg) translateZ(100px);
		}
		.top {
			-webkit-transform: rotateX(90deg) translateZ(100px);
			-moz-transform: rotateX(90deg) translateZ(100px);
			-ms-transform: rotateX(90deg) translateZ(100px);
			-o-transform: rotateX(90deg) translateZ(100px);
			transform: rotateX(90deg) translateZ(100px);
		}
		.bottom {
			-webkit-transform: rotateX(-90deg) translateZ(100px);
			-moz-transform: rotateX(-90deg) translateZ(100px);
			-ms-transform: rotateX(-90deg) translateZ(100px);
			-o-transform: rotateX(-90deg) translateZ(100px);
			transform: rotateX(-90deg) translateZ(100px);
		}
	</style>
</head>
<body>

<div class="stage">
	<div class="container">
		<div class="side front">1</div>
		<div class="side back">2</div>
		<div class="side left">3</div>
		<div class="side right">4</div>
		<div class="side top">5</div>
		<div class="side bottom">6</div>
	</div>
</div>
</body>
</html>